<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			@media screen and (min-width: 1024px) {
				.container {
					max-width: 677px;
				}
			}
			@media screen and (max-width: 1023px) {
				.container {
					min-width: 100%;
				}
			}
			html {
				font-size: 10px;
			}
			body {
				font-size: 15px;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}
			.pre code {
				padding: 2rem !important;
			}

			.hljs * {
				line-height: 2.8rem;
				font-size: 1.2rem;
			}
			.container {
				box-sizing: border-box;
				word-break: break-word;
				background-size: 2rem 2rem;
				background-position: center center;
				visibility: visible;
				color: black;
				padding: 1rem 1.5rem;
				text-align: left;
				line-height: 1.25;
				letter-spacing: 2px;

				margin-left: auto;
				margin-right: auto;
				font-family: sans-serif;
				background-image: linear-gradient(
						90deg,
						rgba(50, 0, 0, 0.05) 3%,
						rgba(0, 0, 0, 0) 3%
					),
					linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
			}
			* {
				margin: 0;
				padding: 0;
				outline: 0;
			}
			.warrp {
				padding: 2rem;
			}
		</style>
	</head>
	<body>
		<div class="warrp">
			<div class="container">
				<h1 class="h1">「Why Use fast-md？」</h1>
				<h2 class="h2">「安装」</h2>
				<pre
					class="pre"
				><code class='hljs'><span class='hljs-meta prompt_'>$ </span><span class='language-bash'>npm i fast-md -g</span>
// 简单使用 &lt; 确保当前目录下有叫 md 的文件夹 &gt;
<span class='hljs-meta prompt_'>$ </span><span class='language-bash'>fmd turn</span>
</code></pre>
				<h2 class="h2">「简介」</h2>
				<p class="p">Fast-md 可以把 markdown 变成漂亮的 html 文件</p>
				<p class="p">
					我在编写 markdown 的时候常常会感觉它不够美观，甚至除了 mark
					高亮，没有任何上色的途径（除了使用 内联css）
				</p>
				<p class="p">
					谁也不会希望写作的时候花大量的时间在调整样式上面，于是有了<a
						href="https://gitee.com/ZLX0326/fast-md"
						class="a"
						>fast-md</a
					>
				</p>
				<p class="p">它可以将你的 md 文件批量处理成好看的 html 文件，就像这样 ↓</p>
				<h3 class="h3">「丑陋的」</h3>
				<p class="p">
					<img
						src="https://gitee.com/ZLX0326/blogimg/raw/master/image-20220422185458620.png"
						alt="image-20220422185458620"
						class="img"
					/>
				</p>
				<p class="p">
					<img
						src="https://gitee.com/ZLX0326/blogimg/raw/master/image-20220422185534293.png"
						alt="image-20220422185534293"
						class="img"
					/>
				</p>
				<h3 class="h3">「美丽的」</h3>
				<p class="p">
					<img
						src="https://gitee.com/ZLX0326/blogimg/raw/master/image-20220422185359863.png"
						alt="image-20220422185359863"
						class="img"
					/>
				</p>
				<p class="p">
					<img
						src="https://gitee.com/ZLX0326/blogimg/raw/master/image-20220422185420132.png"
						alt="image-20220422185420132"
						class="img"
					/>
				</p>
				<h2 class="h2">「如何使用？」</h2>
				<h3 class="h3">「例子 1」</h3>
				<p class="p">
					保证你的路径下面有 md 这样一个文件夹，这很重要。因为 fmd 默认会去 md
					文件夹下读取所有 .md 文件，并输出在 当前的 dest 目录下
				</p>
				<p class="p">
					（你可以通过配置去更改<mark class="mark">源文件路径</mark>，或者<mark
						class="mark"
						>输出文件路径</mark
					>
					）
				</p>
				<pre
					class="pre"
				><code class='hljs'><span class='hljs-meta prompt_'>$ </span><span class='language-bash'><span class='hljs-built_in'>cd</span> <span class='hljs-built_in'>test</span></span>
<span class='hljs-meta prompt_'>$ </span><span class='language-bash'>fmd turn</span>

* 感谢你使用 fast-md!🌈 🌈 🌈 
* 正在处理md📄....
 ⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙ 100% | ETA: 0s | 110/100 
* 处理成功,共计 11 个文件
</code></pre>
				<p class="p">
					<img
						src="https://gitee.com/ZLX0326/blogimg/raw/master/image-20220422190115741.png"
						alt="image-20220422190115741"
						class="img"
					/>
				</p>
				<p class="p">
					<img
						src="https://gitee.com/ZLX0326/blogimg/raw/master/image-20220422190130692.png"
						alt="image-20220422190130692"
						class="img"
					/>
				</p>
				<h3 class="h3">「例子 2」</h3>
				<p class="p">修改输出的路径和输入的路径</p>
				<pre
					class="pre"
				><code class='hljs'><span class='hljs-meta prompt_'>$ </span><span class='language-bash'><span class='hljs-built_in'>cd</span> <span class='hljs-built_in'>test</span></span>
<span class='hljs-meta prompt_'>$ </span><span class='language-bash'>fmd turn --<span class='hljs-built_in'>source</span> markdwondir --dest outfiledir</span>

dest =&gt; outfiledir 参数处理成功!
source =&gt; markdwondir 参数处理成功!
* 感谢你使用 fast-md!🌈 🌈 🌈 
* 正在处理markdwondir📄....

 ⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙⎙ 100% | ETA: 0s | 110/100 
* 处理成功,共计 11 个文件
</code></pre>
				<h3 class="h3">「高级」</h3>
				<p class="p">你可以通过修改 temp 下的模板文件实现自定义</p>
				<p class="p">
					<img
						src="https://gitee.com/ZLX0326/blogimg/raw/master/image-20220422193227476.png"
						alt="image-20220422193227476"
						class="img"
					/>
				</p>
				<p class="p">
					修改完毕后记得修改 根目录下的 config.js 文件才会生效。如果你要自动生成
					config.js 文件请确保文件名和样式名与我默认配置的一致
				</p>
				<pre
					class="pre"
				><code class='hljs'><span class='hljs-meta prompt_'>$ </span><span class='language-bash'><span class='hljs-built_in'>cd</span> <span class='hljs-built_in'>test</span></span>
<span class='hljs-meta prompt_'>$ </span><span class='language-bash'>fmd generator temp/fasts/mod2</span>

配置文件会输出到项目的根文件下的 tempC.json
</code></pre>
				<h2 class="h2">「注意」</h2>
				<p class="p">当前的自动生成配置文件还不是很好用，后续会考虑重新开发</p>
			</div>
		</div>
	</body>
</html>
<style>
	.pre {
		margin-top: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
		box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;
		width: 100%;
		overflow: hidden;
		font-size: 1.2rem;
	}
	.pre:before {
		content: "";
		display: block;
		background: url(https://gitee.com/ZLX0326/blogimg/raw/master/mac.png);
		height: 3rem;
		width: 100%;
		background-size: 4rem;
		background-repeat: no-repeat;
		background-color: #282c34;
		margin-bottom: -7px;
		border-radius: 5px;
		background-position: 10px 10px;
	}
</style>
<style>
	pre code.hljs {
		display: block;
		overflow-x: auto;
		padding: 1em;
	}
	code.hljs {
		padding: 3px 5px;
	}
	.hljs {
		color: #abb2bf;
		background: #282c34;
	}
	.hljs-comment,
	.hljs-quote {
		color: #5c6370;
		font-style: italic;
	}
	.hljs-doctag,
	.hljs-formula,
	.hljs-keyword {
		color: #c678dd;
	}
	.hljs-deletion,
	.hljs-name,
	.hljs-section,
	.hljs-selector-tag,
	.hljs-subst {
		color: #e06c75;
	}
	.hljs-literal {
		color: #56b6c2;
	}
	.hljs-addition,
	.hljs-attribute,
	.hljs-meta .hljs-string,
	.hljs-regexp,
	.hljs-string {
		color: #98c379;
	}
	.hljs-attr,
	.hljs-number,
	.hljs-selector-attr,
	.hljs-selector-class,
	.hljs-selector-pseudo,
	.hljs-template-variable,
	.hljs-type,
	.hljs-variable {
		color: #d19a66;
	}
	.hljs-bullet,
	.hljs-link,
	.hljs-meta,
	.hljs-selector-id,
	.hljs-symbol,
	.hljs-title {
		color: #61aeee;
	}
	.hljs-built_in,
	.hljs-class .hljs-title,
	.hljs-title.class_ {
		color: #e6c07b;
	}
	.hljs-emphasis {
		font-style: italic;
	}
	.hljs-strong {
		font-weight: 700;
	}
	.hljs-link {
		text-decoration: underline;
	}
</style>
<style>
	a {
		text-decoration: none;
		cursor: pointer;
	}
	.a {
		color: rgb(145, 109, 213);
		font-weight: bolder;
		border-bottom: 1px solid rgb(145, 109, 213);
		visibility: visible;
	}
</style>
<style>
	.blockquote {
		border-top: none;
		border-right: none;
		border-bottom: none;
		font-size: 1.2rem;
		overflow: auto;
		color: rgb(106, 115, 125);
		padding: 10px 10px 10px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
		border-left-color: rgb(216, 156, 246);
		background: rgb(244, 238, 255);
		border-radius: 6px;
		border-color: rgb(222, 198, 251);
		border-width: 1px;
		border-style: solid;
	}
	.blockquote p {
		line-height: 3rem;
		margin: 0;
	}
	.blockquote::before {
		content: "☂️";
		color: #dec6fb;
		font-size: 3rem;

		max-height: 2rem;
		padding: 1rem 0;
		display: block;
	}
</style>
<style>
	.h1 {
		font-size: 3.4rem;
		line-height: 1.4;
		margin-bottom: 14px;
	}
</style>
<style>
	.h2 {
		padding-left: 10px;
		border-left: 5px solid rgb(145, 109, 213);
		visibility: visible;
		font-weight: bold;
		font-size: 2.4rem;
		margin-top: 20px;
		margin-right: 10px;
		visibility: visible;
		font-family: cursive;
	}
</style>
<style>
	.img {
		border-radius: 6px;
		display: block;
		margin: 2rem auto;

		object-fit: contain;
		box-shadow: rgb(153, 153, 153) 2px 4px 7px;
		width: 100%;
		height: auto !important;
		visibility: visible !important;
		box-sizing: border-box;
	}
</style>
<style>
	.li {
		margin-top: 5px;
		margin-bottom: 5px;
		line-height: 26px;
		color: rgb(1, 1, 1);
		font-size: 14px;
		visibility: visible;
	}
</style>
<style>
	.p {
		padding-top: 8px;
		padding-bottom: 8px;
		line-height: 26px;
		margin-top: 10px;
		margin-bottom: 10px;
		word-spacing: 2px;
		visibility: visible;

		font-family: Optima-Regular;
	}
</style>
<style>
	.mark {
		padding: 2px 4px;
		border-radius: 4px;
		margin-right: 2px;
		margin-left: 2px;
		font-family: monospace;
		word-break: break-all;
		color: rgb(145, 109, 213);
		background-color: transparent;
		font-weight: bolder;
		font-size: 1.6rem;
	}
</style>
<style>
	.ul {
		margin-top: 8px;
		margin-bottom: 8px;
		padding-left: 25px;
		font-size: 15px;
		list-style-type: circle;
		visibility: visible;
	}
</style>
<style>
	.h3 {
		margin-top: 30px;
		margin-bottom: 10px;
		font-weight: bold;
		text-align: center;
		border-bottom: 2px solid #dec6fb;
		color: #595959;
		position: relative;
		font-size: 1.8rem;
		max-width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
</style>
<style>
	.ol {
		display: block;
		list-style-type: decimal;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 40px;
	}
</style>
